[Amazon Lex] AWS Amplify + Vue.js でWebページにボットを追加してみました

1 はじめに

CX事業本部の平内（SIN）です。

AWS Amplify（以下、Amplify）では、UIツールキットの１つに、チャットボット機能が提供されています。
INTERACTIONS Chatbot

こちらを利用すると、Webページなどに簡単にチャット機能を追加することが可能です。

Amazon Lex（以下、Lex）も最近、日本語に対応したので、利用される場面も広がっているだろうという事で、ここで手順を確認してみたいと思います。
Amazon Lex が日本語に対応。東京リージョンでお使いいただけますhttps://aws.amazon.com/jp/blogs/news/amazon-lex-tokyo/)

Lexのボットは、テンプレートにあるOrderFlowerをそのまま利用した、下記のものを利用しています。

また、ユーザー認証は省略し、Cognitoの未認証IDに、最低限のパーミンションを付与して利用しています。

なお、Amplifyには、Interactions カテゴリの追加で、質問に答えるだけでBot自体を生成する機能もありますが、ここでは、日本語のボットを作成するオプションがなかったので、今回は、使用していません。

% amplify add interactions

2 Amazon Lex

先のブログで作成したボットの名前は、OrderFlowers_ja.JPとなっています。

Lexのコンソール上のTest Chatbotで、動作を確認している様子です。

ボットは、Publishされています。

3 Vue.js+Amplifyの初期化

Vue.jsのプロジェクトをlex_sampleという名前で作成しました。

% vue create lex_sample
❯ Default ([Vue 2] babel, eslint)
・・・略
?  Successfully created project lex_sample.
・・・略
%cd lex_sample

すべてデフォルトの設定でamplifyを初期化し、authカテゴリを追加しています。

% amplify init
% amplify add auth
% amplify push
% amplify status

Current Environment: dev

| Category | Resource name     | Operation | Provider plugin   |
| -------- | ----------------- | --------- | ----------------- |
| Auth     | lexsample95c68d5b | No Change | awscloudformation |

4 ロール設定

Amazon Cognito Identity Poolsに作成されたIDの編集を開き、「認証されていないIDに対してアクセスを有効にする」にチェックを入れます。

未認証で使用されるロールに、今回の要件で必要最小限（テキストのやり取りのみ）となるLexへのアクセス権限を付与しています。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "lex:PostText"
            ],
            "Resource": "arn:aws:lex:ap-northeast-1:*:bot:OrderFlowers_jaJP:$LATEST"
        }
    ]
}

5 main.js

必要なライブラリをインストールし、main.jsでimportしています。

% yarn add aws-amplify aws-amplify-vue

Botへのアクセス情報は、botconfigというオブジェクトに設定して、Amplify.configure() に渡しています。 aws-exports.jsは、Amplifyのコマンドから変更がされるため、修正を避けた形です。

main.js

import Vue from "vue";
import App from "./App.vue";
import "@aws-amplify/ui-vue";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
const botconfig = {
  bots: {
      "OrderFlowers_jaJP": {
        "alias": "$LATEST",
        "region": "ap-northeast-1",
      }
  }
}
Amplify.configure(botconfig);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

Amplify.configure()が2回出てきてなんか、変な感じですが、動いてるみたいです。

main.jsで設定する要領で、下記のようは記述も紹介されていました。

https://aws.amazon.com/jp/blogs/news/amazon-lex-tokyo/

6 App.vue

App.vueは、amplify-chatbotだけを以下のように記述しています。

App.vue

<template>
  <div id="app">
    <amplify-chatbot
      bot-name="OrderFlowers_jaJP"
      bot-title="お花屋さん"
      welcome-message="いらっしゃませ"
    />
  </div>
</template>

7 動作確認

Amplifyでホスティングして、動作を確認している様子です。

% amplify hosting add
% amplify publish
・・・略
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.d23p4hlp9ojngb.amplifyapp.com

8 最後に

今回は、Amplify + Vue.js で作成されたWebアプリに、ボットを追加してみました。

AmplifyのUIツールキットは、簡単で強力だと思います。